<template>
	<div class="building-detail">
		<component
			:is="baseInfo"
			:houseData="baseData"
      :showLocation="true"
      :locationInfo="locationInfo"
		/>
		<div class="list">
			<div
				class="item"
				v-for="(value, key, index) in dataEnum"
				:key="key"
				:class="{wrap: wrapKey.includes(key)}"
			>
				<p>{{ `${index + 1}.${value}` }}</p>
        <template v-if="key === 'sfmzstdPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>
        <template v-else-if="key === 'sfmzstdZgPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>
          <template v-else-if="key === 'sfczjxgbczzrPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>
        <template v-else-if="key === 'sfczjxgbczzrZgPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>

        <template v-else-if="key === 'sstdsyyrkrclzxPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>
        <template v-else-if="key === 'sstdsyyrkrclzxZgPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>

        <template v-else-if="key === 'gryssdcsszblyyqksddpPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>
        <template v-else-if="key === 'gryssdcsszblyyqksddpZgPhoto'">
          <div class="image-list">
            <van-image
              v-for="(image, index) in (collectionData?.[key])?.split('|')"
              :key="index"
              :src="image"
              @click="onPreview((collectionData?.[key])?.split('|'), index)"
            />
          </div>
        </template>

        <p v-else-if="['sfmzstdZgqk', 'sfczjxgbczzrZgqk', 'sstdsyyrkrclzxZgqk', 'gryssdcsszblyyqksddpZgqk'].includes(key)">
					{{ collectionData?.[key] == 1 ? '已整改' : '未整改' }}
				</p>
				<p v-else>{{ collectionData?.[key] ?? '-' }}</p>
			</div>
		</div>
	</div>
</template>

<script setup>
import { defineProps, ref, watch } from 'vue'
import baseInfo from './baseInfo'

const props = defineProps({
	baseData: {
		type: Object,
		default: () => {
		}
	},
  locationInfo: {
		type: Object,
		default: () => {
		}
	},
	collectionData: {
		type: Object,
		default: () => {
		}
	}
})

const dataEnum = ref({
	'jzrks': '总居住人数(人)',
	'zzrs': '租住人数(人)',
	'cs': '房屋层数(层)',
	'fjsl': '房间数量(个)',
	'jzfjs': '出租房间数量(个)',
	'jzscxyaqcksl': '房屋首层现有安全出口的数量(个)',
	'jzxyssltsl': '房屋现有疏散楼梯的数量(个)',
	'jzscmj': '房屋建筑面积(平方米)',
	'ckfhwggptzlsl': '窗口防护网、广告牌、铁栅栏数量(个)',
	'bdfwjzrydddzxcsl': '本房屋居住人员的电动自行车数量',
	'cdfs': '充电方式',
	'cdfsqtbz': '其他充电方式',
	'czryrs': '出租人员从事外卖、闪送、代驾等职业的人数',
	'mhqsl': '灭火器数量(个)',
	'fytsmz': '防烟逃生面罩数量(套)',
	'xggdjsbp': '悬挂固定警示标牌数量(张)',
	'jzsyjyplmhxts': '房屋简易消防喷头数量(个)',
	'jzszlwxdlgybjqs': '房屋烟感报警器数量(个)',
	'wdwhjgfjgqsyyrkrgbdj': '是否存在夹芯彩钢板出租住人',
  'sfczjxgbczzrPhoto':'夹芯彩钢板搭建且出租住人-隐患照片',
	'sfczjxgbczzrMsg':'夹芯彩钢板搭建且出租住人-隐患描述',
	'sfczjxgbczzrZgqk':'夹芯彩钢板搭建且出租住人-整改情况',
	'sfczjxgbczzrZgPhoto':'夹芯彩钢板搭建且出租住人-整改照片',
	'sstdsyyrkrclzx': '疏散通道使用易燃可燃材料装修',
  'sstdsyyrkrclzxPhoto':'疏散通道使用易燃可燃材料装修-隐患照片',
  'sstdsyyrkrclzxMsg':'疏散通道使用易燃可燃材料装修-隐患描述',
	'sstdsyyrkrclzxZgqk':'疏散通道使用易燃可燃材料装修-整改情况',
	'sstdsyyrkrclzxZgPhoto':'疏散通道使用易燃可燃材料装修-整改照片',
	'gryssdcsszblyyqksddp': '供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等',
  'gryssdcsszblyyqksddpPhoto':'设置不利于烟气扩散的顶棚、雨棚等-隐患照片',
  'gryssdcsszblyyqksddpMsg':'设置不利于烟气扩散的顶棚、雨棚等-隐患描述',
	'gryssdcsszblyyqksddpZgqk':'设置不利于烟气扩散的顶棚、雨棚等-整改情况',
	'gryssdcsszblyyqksddpZgPhoto':'设置不利于烟气扩散的顶棚、雨棚等-整改照片',
	'cjzwqtjyyt': '除居住外是否存在其他经营业态',
	'cjzwqtjyytmsg': '除居住外其他经营业态',
  'tdsfdb': '疏散通道是否合格',
	'sfmzstdPhoto':'疏散通道-隐患照片',
  'sfmzstdMsg':'疏散通道-隐患描述',
	'sfmzstdZgqk':'疏散通道-整改情况',
	'sfmzstdZgPhoto':'疏散通道-整改照片',
	'jsrysstd': '建设人员疏散通道',
	'sstdjsqk': '建设状态',
	'sfazfztsss': '是否安装软梯逃生绳等辅助逃生设施',
	'ywgdlttxwd': '楼内有无固定楼梯通向屋顶或室外平台',
})
const wrapKey = [
	'cjzwqtjyytmsg',
	'sstdjsqk',
	'cdfsqtbz',
  'sfmzstdPhoto',
	'sfmzstdMsg',
	// 'sfmzstdZgqk',
	'sfmzstdZgPhoto',
	'sfczjxgbczzrPhoto',
	'sfczjxgbczzrMsg',
	// 'sfczjxgbczzrZgqk',
	'sfczjxgbczzrZgPhoto',
	'sstdsyyrkrclzxPhoto',
	'sstdsyyrkrclzxMsg',
	// 'sstdsyyrkrclzxZgqk',
	'sstdsyyrkrclzxZgPhoto',
	'gryssdcsszblyyqksddpPhoto',
	'gryssdcsszblyyqksddpMsg',
	// 'gryssdcsszblyyqksddpZgqk',
	'gryssdcsszblyyqksddpZgPhoto',
]

watch(() => props.collectionData, val => {
	if (!val?.id) return
	if (val.cjzwqtjyyt === '否') {
		delete dataEnum.value.cjzwqtjyytmsg
	} else {
		delete dataEnum.value.cjzwqtjyyt
	}
	if (val.cdfs?.indexOf('其他') === -1) {
		delete dataEnum.value.cdfsqtbz
	}
	if (val.cs < 2) {
		delete dataEnum.value.sfazfztsss
		delete dataEnum.value.ywgdlttxwd
	}
  if(val.tdsfdb === '是'){
    delete dataEnum.value.sfmzstdMsg
    delete dataEnum.value.sfmzstdZgqk
    delete dataEnum.value.sfmzstdZgPhoto
	}
  if(val.wdwhjgfjgqsyyrkrgbdj === '否'){
    delete dataEnum.value.sfczjxgbczzrMsg
    delete dataEnum.value.sfczjxgbczzrZgqk
    delete dataEnum.value.sfczjxgbczzrZgPhoto
	}
  if(val.sstdsyyrkrclzx === '否'){
    delete dataEnum.value.sstdsyyrkrclzxMsg
    delete dataEnum.value.sstdsyyrkrclzxZgqk
    delete dataEnum.value.sstdsyyrkrclzxZgPhoto
	}
	if(val.gryssdcsszblyyqksddp ==='否'){
    delete dataEnum.value.gryssdcsszblyyqksddpMsg
    delete dataEnum.value.gryssdcsszblyyqksddpZgqk
    delete dataEnum.value.gryssdcsszblyyqksddpZgPhoto
	}
}, {deep: true, immediate: true})
</script>

<style scoped lang="less">
.building-detail {
	padding: 24px 0;

	.base-info {
		margin-bottom: 24px;
	}

	.list {
		background: #fff;
		padding: 0 24px;
	}

	.item {
		display: flex;
		padding: 14px 0;
		border-bottom: 2px solid var(--border-color);

		&:nth-last-of-type(1) {
			border: 0;
		}

		p {
			min-height: 44px;
			line-height: 44px;

			&:nth-of-type(1) {
				color: var(--content-color);
				width: 500px;
			}

			&:nth-of-type(2) {
				width: 0;
				flex: 1;
			}
		}
	}

	.wrap {
		flex-direction: column;
		flex-wrap: wrap;

		p {
			&:nth-of-type(2) {
				width: 100%;
			}
		}
    .image-list {
			width: 100%;
			display: flex;
			gap: 24px;
			.van-image {
				border-radius: 8px;
				overflow: hidden;
				width: calc(calc(100% - 120px) / 5);
				height: 120px;
			}
		}
	}
}
</style>
